<template>
  <div class="not-found">
    <div class="not-found-content">
      <div class="error-code">404</div>
      <h1>页面未找到</h1>
      <p>抱歉，您访问的页面不存在或已被移除。</p>
      
      <div class="actions">
        <el-button type="primary" @click="goHome">
          <House class="icon" />
          返回首页
        </el-button>
        <el-button @click="goBack">
          <ArrowLeft class="icon" />
          返回上页
        </el-button>
      </div>
    </div>
    
    <div class="illustration">
      <svg viewBox="0 0 400 300" class="error-svg">
        <defs>
          <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
            <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
          </linearGradient>
        </defs>
        
        <!-- 背景圆圈 -->
        <circle cx="200" cy="150" r="120" fill="url(#gradient)" opacity="0.1" />
        
        <!-- 主要图形 -->
        <rect x="150" y="100" width="100" height="100" rx="10" fill="url(#gradient)" opacity="0.8" />
        
        <!-- 装饰元素 -->
        <circle cx="120" cy="80" r="8" fill="#667eea" opacity="0.6" />
        <circle cx="280" cy="220" r="12" fill="#764ba2" opacity="0.4" />
        <circle cx="320" cy="100" r="6" fill="#667eea" opacity="0.5" />
        
        <!-- 问号 -->
        <text x="200" y="170" text-anchor="middle" font-size="48" font-weight="bold" fill="white">?</text>
      </svg>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { House, ArrowLeft } from '@element-plus/icons-vue'

const router = useRouter()

const goHome = () => {
  router.push({ name: 'Dashboard' })
}

const goBack = () => {
  router.back()
}
</script>

<style scoped>
.not-found {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 24px;
}

.not-found-content {
  text-align: center;
  max-width: 500px;
  margin-right: 48px;
}

.error-code {
  font-size: 120px;
  font-weight: bold;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 24px;
}

.not-found-content h1 {
  font-size: 32px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 16px 0;
}

.not-found-content p {
  font-size: 16px;
  color: #6b7280;
  margin: 0 0 32px 0;
  line-height: 1.6;
}

.actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.icon {
  margin-right: 8px;
}

.illustration {
  flex-shrink: 0;
}

.error-svg {
  width: 300px;
  height: 225px;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@media (max-width: 768px) {
  .not-found {
    flex-direction: column;
    text-align: center;
  }
  
  .not-found-content {
    margin-right: 0;
    margin-bottom: 32px;
  }
  
  .error-code {
    font-size: 80px;
  }
  
  .not-found-content h1 {
    font-size: 24px;
  }
  
  .error-svg {
    width: 200px;
    height: 150px;
  }
  
  .actions {
    flex-direction: column;
    align-items: center;
  }
}
</style>